<template>
  <div>
    <CategorySelector :disabled="!showFlag"></CategorySelector>
    <AttrList
      class="attr-card"
      v-if="showFlag"
      @setShowAttrList="showFlag = $event"
    ></AttrList>
    <AddOrUpdateAttr
      class="attr-card"
      v-else
      @setShowAttrList="showFlag = $event"
    ></AddOrUpdateAttr>
  </div>
</template>

<script lang="ts" setup>
import AttrList from "./components/AttrList.vue";
import AddOrUpdateAttr from "./components/AddOrUpdateAttr.vue";
import { ref } from "vue";
defineOptions({
  name: "Attr",
});
const showFlag = ref(true); // 控制新增或修改组件显示或隐藏的开关
</script>

<style scoped lang="scss">
.attr-card {
  margin-top: 20px;
}
</style>
